<template>
	<view class="tui-product-list" :style="{ marginTop: px(dropScreenH) }">
		<view class="tui-product-container">
			<block v-for="(item, index) in list" :key="index" v-if="(index + 1) % 2 != 0 || isList">
				<!--商品列表-->
				<view class="tui-product-item" :class="[isList ? 'tui-flex-list' : '']" hover-class="hover" :hover-start-time="150" @tap="detail(item)" v-if="tui.inArray(showType, ['list','classify'])">
					<image :src="item.thumb.url" class="tui-product-img" :class="[isList ? 'tui-product-list-img' : '',tui.inArray(showType, ['classify']) ? 'classify' : '']" mode="widthFix" v-if="item.thumb"></image>
					<view class="tui-product-content">
						<view class="tui-product-tit">
							<tui-overflow-hidden :lineClamp="2">
								{{ item.title }}
							</tui-overflow-hidden>
						</view>
						<view class="tui-product-price">
							<text class="tui-sale-price">￥{{ item.current_price }}</text>
							<text class="tui-factory-price">￥{{ item.market_price }}</text>
						</view>
						<view class="tui-product-pay">{{ item.sales_num_count }}人付款</view>
					</view>
				</view>
				<!--商品列表-->
			</block>
		</view>
		<view class="tui-product-container" v-if="!isList">
			<block v-for="(item, index) in list" :key="index" v-if="(index + 1) % 2 == 0 || isList">
				<!--商品列表-->
				<view class="tui-product-item" :class="[isList ? 'tui-flex-list' : '']" hover-class="hover" :hover-start-time="150" @tap="detail(item)" v-if="tui.inArray(showType, ['list','classify'])">
					<image :src="item.thumb.url" class="tui-product-img" :class="[isList ? 'tui-product-list-img' : '',tui.inArray(showType, ['classify']) ? 'classify' : '']" mode="widthFix" v-if="item.thumb"></image>
					<view class="tui-product-content">
						<view class="tui-product-tit">
							<tui-overflow-hidden :lineClamp="2">
								{{ item.title }}
							</tui-overflow-hidden>
						</view>
						<view class="tui-product-price">
							<text class="tui-sale-price">￥{{ item.current_price }}</text>
							<text class="tui-factory-price">￥{{ item.market_price }}</text>
						</view>
						<view class="tui-product-pay">{{ item.sales_num_count }}人付款</view>
					</view>
				</view>
				<!--商品列表-->
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		emits: ['click'],
		props: {
			list: {
				type: Array,
				default: () => []
			},
			showType: {
				type: String,
				default: 'list'
			},
			dropScreenH: {
				type: Number,
				default: 0,
			},
			isList: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {};
		},
		created() {
			let that = this;
			that.initialize();
		},
		watch: {

		},
		methods: {
			async initialize() {
				let that = this;
				let appInit = that.tui.getCache("appinit");
			},
			px(num) {
				return uni.upx2px(num) + 'px';
			},
			detail(item) {
				let that = this;
				that.$emit('click', 'goodsClick', item);
			}
		},
	}
</script>

<style scoped lang="scss">
	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		box-sizing: border-box;

		.tui-product-container {
			width: 50%;
			flex: 1;
			margin-right: 2%;

			&:last-child {
				margin-right: 0;
			}

			.tui-flex-list {
				display: flex;
			}

			.tui-product-item {
				width: 100%;
				margin-bottom: 4%;
				background: #fff;
				box-sizing: border-box;
				border-radius: 12rpx;
				overflow: hidden;

				.tui-product-img {
					width: 100%;
					height: 100%;
					display: block;
				}

				.classify {
					width: 260rpx !important;
					height: 260rpx !important;
				}

				.tui-product-list-img {
					width: 260rpx !important;
					height: 260rpx !important;
					flex-shrink: 0;
					border-radius: 12rpx;
				}

				.tui-product-content {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					box-sizing: border-box;
					padding: 20rpx;

					.tui-product-tit {
						min-height: 82rpx;
					}

					.tui-product-price {
						padding-top: 10rpx;

						.tui-sale-price {
							font-size: small;
						}
					}

					.tui-product-pay {
						// padding-top: 10rpx;
						font-size: 24rpx;
						color: #656565;
					}
				}
			}
		}
	}
</style>